<template>
<div class="">
    
    <mt-tabbar v-model="selected" @click.native="next" fixed>
        <mt-tab-item id="1">
            <img slot="icon" src="../assets/home_active.png">
            首页1
        </mt-tab-item>
        <mt-tab-item id="2">
            <img slot="icon" src="../assets/pic.png">
            图片1
        </mt-tab-item>
        <mt-tab-item id="3">
            <img slot="icon" src="../assets/blog.png">
            文章1
        </mt-tab-item>
        <mt-tab-item id="4">
            <img slot="icon" src="../assets/user.png">
            我的1
        </mt-tab-item>
    </mt-tabbar>
    <mt-tab-container v-model="selected">
  <mt-tab-container-item id="1">
    <mt-cell v-for="n in 10" :title="'内容 ' + n" v-bind:key="n"/>
  </mt-tab-container-item>
  <mt-tab-container-item id="2">
    <mt-cell v-for="n in 4" :title="'测试 ' + n"  v-bind:key="n"/>
  </mt-tab-container-item>
  <mt-tab-container-item id="3">
    <mt-cell v-for="n in 6" :title="'选项 ' + n" v-bind:key="n"/>
  </mt-tab-container-item>
</mt-tab-container>
</div>
</template>

<script>
export default {
  name: 'navBar',
  data:function() {
    return {
      msg: 'myapp index',
      selected : '1',
    }
  },
  watch: {
      $route(val){
          console.log(this.$route)
      }
  },
  methods: {
      next() {
          console.log(this.selected);
          if(this.selected == 1){
              this.$router.push('myapp') //https://router.vuejs.org/zh/guide/essentials/navigation.html
          }
          if(this.selected == 2){
              this.$router.push('images') //https://router.vuejs.org/zh/guide/essentials/navigation.html
          }
          if(this.selected == 3){
              this.$router.push('blogs') //https://router.vuejs.org/zh/guide/essentials/navigation.html
          }
          if(this.selected == 4){
              this.$router.push('user') //https://router.vuejs.org/zh/guide/essentials/navigation.html
          }

        return true;
      }
    },
    created() {
         console.log(this.$route)
    }
}
</script>